import classNames from "classnames";
import "./index.scss";
import { useMemo, useState } from "react";
import { billTypeToName } from "@/contants/index";
import Icon from "@/components/Icon";

const DailyBill = ({ date, billList }) => {
      const dayResult = useMemo(() => {
            // 支出 / 收入 /结余
            const pay = billList?.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0)
            const income = billList?.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0)
            return {
                  pay: pay || 0.00,
                  income: income || 0.00,
                  total: pay + income || 0.00
            }
      }, [billList])

      const [visible, setVisible] = useState(false)

      return (
            <div className={classNames('dailyBill')}>
                  <div className="bailyBillHeader">
                        <div className="dateIcon">
                              <span className="date">{date}</span>
                              {/* expand 有这个类名 展开箭头朝上的样子 */}
                              <span className={classNames('arrow', visible && 'expand')} onClick={() => setVisible(!visible)}></span>
                        </div>
                        <div className="oneLineOverview">
                              <div className="pay">
                                    <span className="type">支出</span>
                                    <span className="money">{dayResult.pay.toFixed(2)}</span>
                              </div>
                              <div className="income">
                                    <span className="type">收入</span>
                                    <span className="income">{dayResult.income.toFixed(2)}</span>
                              </div>
                              <div className="total">
                                    <span className="type">结余</span>
                                    <span className="total">{dayResult.total.toFixed(2)}</span>
                              </div>
                        </div>
                  </div>
                  {/* 单日列表 */}
                  {visible &&
                        <div className="billList">
                              {billList.map(item => {
                                    return (
                                          <div className="bill" key={item.id}>
                                                {/* 渲染图标 */}
                                                <Icon type={item.useFor} />
                                                <div className="detail">
                                                      <div className="billType">{billTypeToName[item.useFor]}</div>
                                                </div>
                                                <div className={classNames('money', item.type)}>
                                                      {item.money.toFixed(2)}
                                                </div>
                                          </div>
                                    )
                              })}
                        </div>
                  }

            </div>
      )
}

export default DailyBill;